<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加人员</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
		<link rel="stylesheet" href="../css/mui.picker.min.css" />
	</head>
	<style type="text/css">
		.mui-bar-nav .mui-icon{
			padding: 0;
			margin: 0;
			display: inline-block;
			line-height: 45px;
		}
		.mui-bar-nav .addPerson{
			font-size: 1.1rem;
		}
		.search-li{
			background-color:#F0F0F0 ;
			padding: .7rem 1rem;
			font-size: 1rem;
			font-weight: bold;
		}
		.baseInfomation ul li{
			position: relative;
			padding:.6rem .8rem;
			border-bottom: 1px solid #F0F0F0;
			font-size: 1rem;
		}
		.baseInfomation ul li label{
			display: inline-block;
			width: 25%;
		}
		.baseInfomation ul li input{
			width: 72%;
			margin: 0;
			border: none;
			display: inline-block;
			margin: 0;
			padding: 0;
			
		}
		
		.mui-radio{
			vertical-align: middle;
			height: 40px;
			width: 15%;
			display: inline-block;
			margin-right:1rem;
		}
		.mui-radio input{
			height: 40px;
		}
		.mui-radio span{
			position: absolute;
		    top: 9px;
		    right:0px;
		}
		.mui-checkbox input[type=checkbox], .mui-radio input[type=radio] {
		    position: absolute;
		    top: 4px;
		    left:0px;
		    display: inline-block;
		    width: 28px;
		    height: 26px;
		    border: 0;
		    outline: 0!important;
		    background-color: transparent;
		    -webkit-appearance: none;
	    }
	    .baseInfomation ul li .mui-icon-plus{
	    	position: absolute;
	    	right: 2rem;
	    	top: .9rem;
	    	color: #2B8DF7;
	    	font-size: 1.8rem;
	    	z-index: 99;
	    	font-weight: bold;
	    }
	    #getCode{
	    	position: absolute;
	    	right: 1rem;
	    	top: .9rem;
	    	width: 26%;
	    	height: 2rem;
	    	padding: 0!important;
	    	margin: 0;
	    	font-size: .9rem;
	    	line-height: 2rem;
	    }
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">添加人员</h1>
		</header>
		<div class="mui-content">
			<div class="search-li">
		    	<p style="font-size: 1rem;">基本信息</p>
			</div>
			<div class="baseInfomation">
				<ul>
					<li><label for="">姓名</label><input type="text" id="p_name" placeholder="请输入姓名" /></li>
					<li>
						<label for="">性别</label>
						<div class="mui-input-row mui-radio">
							<input type="radio" name="sex" data-sex="0" checked="checked"/>
							<span>男</span>
						</div>
						<div class="mui-input-row mui-radio">
							<input type="radio"name="sex" data-sex="1"/>
							<span>女</span>
						</div>
					</li>
					<li>
						<label for="">身份证号</label>
						<input type="text"placeholder="请输入身份证号" id="p_idNo"/>
						<span class="mui-icon mui-icon-plus" id="readIdInfomation"></span>
					</li>
					<li><label for="">民族</label><input readonly="readonly" data-value="" type="text"placeholder="请选择民族"id="nationPiker"/></li>
					<li><label for="">出生日期</label><input type="text"placeholder="请输入出生日期" id="birthDay" /></li>
					<li><label for="">家庭地址</label><input type="text"readonly="readonly" id="p_address" placeholder="请输入家庭住址"/></li>
					<li><label for="">手机号码</label><input type="text" id="userMobile" value="" placeholder="请输入手机号码"/></li>
					<li>
						<label for="">验证码</label>
						<input type="text" id="p_msgCode" placeholder="请输入验证码"/>
						<button type="button" class="mui-btn mui-btn-primary" id="getCode">获取验证码</button>
					</li>
					<li><label for="">房间号</label><input type="text"placeholder="请输入房间号" id="p_roomNo" /></li>
				</ul>
			</div>
			<div class="btn-box">
				<button type="button" class="mui-btn mui-btn-primary" id="createPerson">完成</button>
			</div>
		</div>
		<script src="../js/jquery.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script src="../js/md5.js"></script>
		<script src="../js/mui.picker.min.js"></script>
		<script>
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			//民族选选择器
			var nationPiker = document.getElementById('nationPiker');
			nationPiker.addEventListener("tap", function() {
  				var roadPick = new mui.PopPicker();
                roadPick.setData(
                	[
                		{value: "01",text: "汉族"},{value: "02",text: "蒙古族"},{value: "03",text: "回族"},
                		{value: "04",text: "藏族"},{value: "05",text: "维吾尔族"},{value: "06",text: "苗族"},
                		{value: "07",text: "彝族"},{value: "08",text: "壮族"},{value: "09",text: "布依族"},
                		{value: "10",text: "朝鲜族"},{value: "11",text: "满族"},{value: "12",text: "侗族"},
                		{value: "13",text: "瑶族"},{value: "14",text: "白族"},{value: "15",text: "土家族"},
                		{value: "16",text: "哈尼族"},{value: "17",text: "哈萨克族"},{value: "18",text: "傣族"},
                		{value: "19",text: "黎族"},{value: "20",text: "傈僳族"},{value: "21",text: "佤族"},
                		{value: "22",text: "畲族"},{value: "23",text: "高山族"},{value: "24",text: "拉祜族"},
                		{value: "25",text: "水族"},{value: "26",text: "东乡族"},{value: "27",text: "纳西族"},
                		{value: "28",text: "景颇族"},{value: "29",text: "柯尔克孜族"},{value: "30",text: "土族"},
                		{value: "31",text: "达斡尔族"},{value: "32",text: "仫佬族"},{value: "33",text: "羌族"},
                		{value: "34",text: "布朗族"},{value: "35",text: "撒拉族"},{value: "36",text: "毛南族"},
                		{value: "37",text: "仡佬族"},{value: "38",text: "锡伯族"},{value: "39",text: "阿昌族"},
                		{value: "40",text: "普米族"},{value: "41",text: "塔吉克族"},{value: "42",text: "怒族"},
                		{value: "43",text: "乌孜别克族"},{value: "44",text: "俄罗斯族"},{value: "45",text: "鄂温克族"},
                		{value: "46",text: "德昂族"},{value: "47",text: "保安族"},{value: "48",text: "裕固族"},
                		{value: "49",text: "京族"},{value: "50",text: "塔塔尔族"},{value: "51",text: "独龙族"},
                		{value: "52",text: "鄂伦春族"},{value: "53",text: "赫哲族"},{value: "54",text: "门巴族"},
                		{value: "55",text: "珞巴族"},{value: "56",text: "基诺族"},{value: "59",text: "穿青人"},
                		{value: "60",text: "亻革家人"},{value: "98",text: "外国血统"},{value: "99",text: "其它"}
                    ]
                );
		        roadPick.show(function(item) {//弹出列表并在里面写业务代码
		        	var itemCallback=roadPick.getSelectedItems();  
		         	nationPiker.value = itemCallback[0].text;
		         	nationPiker.dataset.vlaue = itemCallback[0].value;//赋值给data-value;
		        });
        	});
			//调取摄像头扫描身份证。
			document.getElementById('readIdInfomation').addEventListener('tap',function(){
				
				window.android.scanIdCard();
			})
			//原生调取的方法把扫描身份证的信息传回来。
			function getInfoMation(res){
				if(res){
					document.getElementById("p_name").value = res.name;
					document.getElementById('p_idNo').value = res.id;
					document.getElementById('nationPiker').value = res.nation;
					document.getElementById('birthDay').value = res.birth;
					document.getElementById("p_address").value = res.address;
					//性别处理
					var person_sex = ''
					if(res.sex=='男'){
						person_sex= '0'
					}else if(res.sex=='女'){
						person_sex= '1'
					}
					$("input[name='sex']").removeAttr('checked');
					$("input[name='sex']").each(function(){
	    				if($(this).attr('data-sex')==person_sex){
	    					$(this).attr('checked',true);
	    				}
					});
				}else{
					alert('解析信息有误，请重新操作！')
				}
			}
			//生日选择器
			document.getElementById('birthDay').addEventListener('tap',function(){
				var dtpicker = new mui.DtPicker({
				    type: "datetime",//设置日历初始视图模式 
				    beginDate: new Date(1899,01,01),//设置开始日期 
				    endDate: new Date().getFullYear(),//设置结束日期 
				    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
				    customData: { 
				        h: [
				            { value: 'AM', text: '上午' },
				            { value: 'PM', text: '下午' }
				        ] 
				    }
				}) 
				
				dtpicker.show(function(birthDay) {
				    document.getElementById('birthDay').value = birthDay.value.slice(0,10);
				}) 
			})
				
			//获取验证码：
			document.getElementById('getCode').addEventListener('tap',function(){
			var mobile = localStorage.getItem('mobile');//本地取到电话号码
			var timestamp = formatDateTime();//年月日时分秒
			var key = 'udacs!@#';//固定的key值
			var token = mobile + timestamp + key;//token的拼接
			var md5 = hex_md5(token);//token的ma5加密	
			var userMobile = document.getElementById('userMobile').value; 
				if(userMobile!==''){
					if(!(/^1[34578]\d{9}$/.test(userMobile))){ 
        				mui.toast("手机号码有误，请重新输入",{duration:'short',type:''}); 
        				document.getElementById('userMobile').value = '';
        				return false; 
				}else{
					$.ajax(httpUrl+'/get_sms',{
						data:JSON.stringify({
							"auth":{
								"mobile":mobile,
								"token":md5,
								"imei":"imei",
								"imsi":"imsi",
								"timestamp" :timestamp
							},
					   		"api_ver":"1",
							"req":{
								"mobile":userMobile ,
								"page":"1",
								"type":"2"//2是获取验证码
							}
						}),
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						timeout:10000,//超时时间设置为10秒；
						contentType: "text/plain; charset=utf-8",					
						success:function(data){
							
							if(data.rsmsg.rscode=='0'){
								mui.toast('验证码已下发手机，请注意查收！',{duration:'short',type:''});
							}
						},
						error:function(xhr,type,errorThrown){
							mui.toast('网络异常或者服务器出错：'+type,{duration:'short',type:''});
						}
						
						})
							
					}
				}else{
					mui.toast('请输入手机号码',{duration:'short',type:''})
				}
										
			})		
				
			//完成新建人员
			document.getElementById('createPerson').addEventListener('tap',function(){
				
				var p_name = document.getElementById('p_name').value;
				var person_sex ='';
				$("input[name='sex']").each(function(){
    				if($(this).attr('checked',true)){
    					person_sex = $(this).attr('data-sex');
    				}
				});
				var p_idNo = document.getElementById('p_idNo').value;
				var nationPiker = document.getElementById('nationPiker').value;
				var birthDay = document.getElementById('birthDay').value;
				var p_address = document.getElementById('p_address').value;
				var userMobile = document.getElementById('userMobile').value;
				var p_msgCode = document.getElementById('p_msgCode').value;
				var p_roomNo = document.getElementById('p_roomNo').value;
				if(p_name!==''&&birthDay!==''&&p_idNo!==''&&nationPiker!==''&&birthDay!==''&&userMobile!==''&&p_msgCode!==''&&p_roomNo!==''){
					//请求接口保存数据
					$.ajax(httpUrl+'/get_sms',{
						data:JSON.stringify({
							"auth":{
								"mobile":mobile,
								"token":md5,
								"imei":"imei",
								"imsi":"imsi",
								"timestamp" :timestamp
							},
					   		"api_ver":"1",
							"req":{
								"mobile": mobile,
								"house_id": "",//房屋id
						        "user_mobile":userMobile,
						        "user_name":p_name,
						        "sex": person_sex,
						        "id_card": p_idNo,
						        "user_nation": nationPiker,
						        "address":p_address,
						        "user_bir": birthDay,						    
								"sms_key": p_msgCode,
								"page":"1",
								"type":"2"//2是获取验证码
							}
						}),
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						timeout:10000,//超时时间设置为10秒；
						contentType: "text/plain; charset=utf-8",					
						success:function(data){
							mui.toast(data.rsmsg.rsdesc,{duration:'short',type:''});
							if(data.rsmsg.rscode=='0'){
								setTimeout(function () {
		    		 	    		location.href = 'authorization.html?hasLocalStorage=true'
								}, 1500)
							}	
						},
						error:function(xhr,type,errorThrown){
							mui.toast('网络异常或者服务器出错：'+type,{duration:'short',type:''});
						}
					})
				}else{
					mui.toast('请确认填写完再提交',{duration:'short',type:''});
				}
			})
			
			
			
		

			
		</script>
	</body>

</html>